<template>
<div>
    <div style="margin-top: 20px">
    <el-button @click="toggleSelection(tableData)" type="success">反选</el-button>
    <el-button @click="toggleSelection()" type="success">取消选择</el-button>

  </div>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    stripe='ture'
    @selection-change="handleSelectionChange"

    >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="class"
      label="类别"
      width="200">
      <!-- <template slot-scope="scope">{{ scope.row.id }}</template> -->
    </el-table-column>
    <el-table-column
      prop="title"
      label="名称"
      width="200">
    </el-table-column>
    <el-table-column
      prop="fund"
      label="经费预算"
      width="200">
    </el-table-column>
    <el-table-column
      prop="date"
      label="付款期限"
      width="200">
    </el-table-column>
    <el-table-column
      prop="department"
      label="负责部门"
      width="200">
    </el-table-column>
    <el-table-column
      prop="proposers"
      label="申请人"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>

  </div>

</template>

<script>
export default {
  data() {
    return {
      multipleSelection: [],
    }
  },
  props: {
    tableData: Array,
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      // console.log(this.multipleSelection)
      this.$emit('remove', this.multipleSelection)
    },
  },

}
</script>
